<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
<!--		&lt;!&ndash; #ifdef APP-PLUS &ndash;&gt;-->
<!--		<u-no-network @retry="init"></u-no-network>-->
<!--		&lt;!&ndash; #endif &ndash;&gt;-->
<!--		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~"></shopro-empty>-->

		<view v-if="isConnected && isRefresh" class="content-box">
			<!-- 导航栏 -->
			<home-head borderRadius="0" :isScorll="isScorll" :navTitle="initShop.name" :citys="citys"></home-head>
      <view class="search-box" v-show="!isScorll" :class="!isScorll?'activeopty':'activenone'">
        <view class="searchrong">
          <u-search placeholder="输入店铺名称" :disabled="true" shape="square" action-text="" :action-style="{'display':'none'}"
                    :animation="true" class="u-flex u-row-center" @click="$Router.push('/pages/public/search')"></u-search>
          <u-icon name="scan" class="scan" color="#333333" @click="toscan"></u-icon>
        </view>

      </view>
			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
          <!-- 滑动宫格 -->
        <!--  <sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" ></sh-grid-swiper> -->
          <!-- 轮播 -->
          <sh-banner
              v-if="item.type === 'banner'"
              :Px="item.content.x"
              :Py="item.content.y"
              :borderRadius="item.content.radius"
              :height="300"
              :list="item.content.list"
          ></sh-banner>
		 <!-- 搜索 -->
<!--					<sh-search v-if="item.type === 'search'"></sh-search>-->



<!--					&lt;!&ndash; 推荐商品 &ndash;&gt;-->
<!--					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>-->
<!--					&lt;!&ndash; 广告魔方 &ndash;&gt;-->
<!--					<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>-->

<!--					&lt;!&ndash; 优惠券 &ndash;&gt;-->
<!--					<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>-->
					<!-- 秒杀-->
          <view class="activity" v-if="item.type === 'groupon'" style=" background: url('https://duomi.bigchun.com/images/Frame111.png') no-repeat!important;background-size: 100%;" >
            <huixuan-exercise class="seckill-card-xianshi" :title="'限时秒杀'" :isshouye="true" :detail="item.content"></huixuan-exercise>
          </view>
<!--					&lt;!&ndash; 拼团 &ndash;&gt;-->
<!--					<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>-->
<!--					&lt;!&ndash; 富文本 &ndash;&gt;-->
<!--					<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>-->
					<!-- 功能标题 -->
<!--					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name" :bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>-->
<!--					&lt;!&ndash; 直播 &ndash;&gt;-->
<!--					&lt;!&ndash; #ifdef MP-WEIXIN &ndash;&gt;-->
<!--					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>-->
<!--					&lt;!&ndash; #endif &ndash;&gt;-->
				</block>
			</view>

			<!-- 分类选项卡 	v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"-->
			<sh-category-tabs
          ref="tabchoose"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs>
			<!-- 悬浮按钮 -->
<!--			<shopro-float-btn></shopro-float-btn>-->
			<!-- 连续弹窗提醒 -->
<!--			<shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal>-->
			<!-- 隐私协议 -->
<!--			&lt;!&ndash; #ifdef APP-PLUS &ndash;&gt;-->
<!--			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>-->
<!--			&lt;!&ndash; #endif &ndash;&gt;-->
<!--			&lt;!&ndash; #ifdef H5 &ndash;&gt;-->
<!--			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>-->
<!--			&lt;!&ndash; #endif &ndash;&gt;-->
		</view>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shTitleCard from './components/sh-title-card.vue';
import shSearch from './components/sh-search.vue';
import shCategoryTabs from './components/sh-category-tabs.vue';
import homeHead from './index/home-head.vue';
// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import log from "../order/after-sale/log";
export default {
	components: {
		shBanner,
		shGridSwiper,
		shGroupon,
		shHotGoods,
		shAdv,
		shCoupon,
		shSeckill,
		shRichtext,
		shTitleCard,
		shSearch,
		shCategoryTabs,
		homeHead,
		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			isRefresh: true,
			enable: false, //是否开启吸顶。
			isConnected: true, //是否有网
			showPrivacy: false, //协议
			isScorll: false,
      citys:''
		};
	},
	computed: {
		...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin','latitude','longitude']),
		// 头部模块数据
		headSwiperList() {
			if (this.latitude) {
				return this.latitude;
			}
		},
		// 分类选项卡数据
		categoryTabsData() {
			if (this.homeTemplate?.length) {
				return this.homeTemplate[this.homeTemplate.length - 1]?.content;
			}
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.isScorll = e.scrollTop > 50 ? true : false;
	},
	onShow() {
		let that = this;
    that.enable = true;
  	// 网络变化检测
		uni.onNetworkStatusChange(res => {
      that.isConnected = res.isConnected;
			res.isConnected && that.init();
      that.isLogin && that.getCartList();
		});

  },
	onHide() {
		this.enable = false;
	},
	onLoad() {
    let that = this;
		// #ifdef APP-VUE
		// app隐私协议弹窗
		if (!plus.runtime.isAgreePrivacy()) {
      that.showPrivacy = true;
      that.showNoticeModal = false;
		}
		// #endif
  },
  created(){

  },
  watch:{
    'categoryTabsData.category_arr': {
      immediate: true,
      handler (val) {
        var that = this;
        that.citys = uni.getStorageSync("city") || "";//城市名称
        console.log("=this.citys ===",that.citys )
        console.log(uni.getStorageSync("latitude") ,uni.getStorageSync("longitude"),"=========latitude",this.latitude,"=========longitude",this.longitude,)
        console.log("ns===========",val)
      }
    }
  },
	methods: {
		...mapActions(['appInit', 'getTemplate', 'getCartList']),
		// 初始化
		init() {
			this.isRefresh = false;
			return Promise.all([this.getTemplate()]).then(() => {
				uni.stopPullDownRefresh();
				this.isRefresh = true;
			});
		},
    //绑定设备调用微信扫码
    toscan() {
      // 允许从相机和相册扫码
      var that = this;
      uni.scanCode({
        success: function(res) {
          console.log('条码类型：' + res.scanType);
          console.log('条码内容：' + res.result);
          let formdata = {
            pc_id: res.result,
            authorization: uni.getStorageSync('token')
          }
          // uni.$u.http.post('/applet/bind_device', formdata).then(res => {
          //   if(res.code){
          //     that.$u.toast('绑定成功');
          //     that.getFacilitiesInfo()
          //   }else{
          //     that.$u.toast(res.msg)
          //   }
          // })
        }
      });
    }
	}
};
</script>

<style lang="scss" scoped>
.activity{
  background-size: 100% 100%;
  margin: 22rpx 22rpx;
  padding: 10rpx 22rpx;
  border-radius: 28rpx;
}
.search-box {
  width: 100%;
  height: 98rpx;
  margin-top: -6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("https://duomi.bigchun.com/images/Frame108.png") no-repeat;
  position: relative;
  .searchrong{
    width: 95%;
    position: relative;
    margin: 0 auto;
    .scan {
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      z-index: 1222;
    }
  }
}
.activeopty{
  opacity: 1;
  transition: opacity 0.8s;
}
.activenone{
  opacity: 0;
  transition: opacity 0.8s;
}
.content-box{
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
}
</style>
